<template>
	<!-- 加载状态组件 -->
	<uni-load-more :status="isLoadingStatus" v-if="isLoading" />

	<!-- 书评页面容器 -->
	<scroll-view v-else class="review-page" scroll-y @scrolltolower="handlePageGetReviewList">
		<!-- 书籍评分区域 -->
		<view class="book-rating">
			<view class="rating-overview">
				<span class="rating-value">{{ bookInfo?.score }}</span>
				<span class="rating-count">{{ bookInfo?.scoreNum }}人评分</span>
			</view>
			<view class="star-display">
				<uni-icons v-for="lightStar in getLightStarCount(bookInfo?.score || 0)" :key="lightStar"
					type="star-filled" size="16" color="#FFD700"></uni-icons>
				<uni-icons v-for="emptyStar in 5 - getLightStarCount(bookInfo?.score || 0)" :key="emptyStar"
					type="star-filled" size="16" color="#e1e1e1"></uni-icons>
			</view>
		</view>

		<!-- 筛选按钮区域 -->
		<view class="filter-buttons">
			<button v-for="(value, key) in FILTER_MAP" :key="key" class="filter-button"
				:class="{ 'active': activeFilter === value }" @click="handleFilter(value)">{{ value }}</button>
		</view>

		<!-- 书评列表区域 -->
		<view class="review-list">
			<view v-for="(review, index) in reviewData" :key="index" class="review-card">
				<!-- 用户信息区域 -->
				<view class="review-header">
					<image :src="`${baseURL}${review.userAvatar}`" alt="用户头像" class="user-avatar" />
					<view class="user-info">
						<div class="user-name">{{ review.userName }}</div>
						<div class="publish-time">{{ review.createTime }}</div>
					</view>
					<button class="follow-button" size="mini">关注</button>
				</view>
				<!-- 评论内容区域 -->
				<view class="review-content">
					<p>{{ review.commentContent }}</p>
				</view>
				<!-- 评论互动区域 -->
				<view class="review-footer">
					<view class="review-rating">
						<span class="rating-stars">{{ getStarsDisplay(review.score) }}</span>
					</view>
					<view class="interaction-controls">
						<span class="review-time">{{ review.remark }}</span>
						<!-- 点赞按钮 -->
						<button class="interaction-button" @click="handleLikeReview(review?.id || 0)">
							<uni-icons type="hand-up" size="15"></uni-icons>
							<span class="like-count">{{ review.likeCount }}</span>
						</button>
						<!-- 踩按钮 -->
						<button class="interaction-button" @click="handleUnlikeReview(review?.id || 0)">
							<uni-icons type="hand-down" size="15"></uni-icons>
							<span class="dislike-count">{{ review.dislikeCount }}</span>
						</button>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	// 导入依赖
	import { getBookInfoByIdAPI } from '@/services/book'
	import { commonPageQueryData } from '@/services/global'
	import { pageReviewsAPI } from '@/services/review'
	import { BookItem } from '../../types/book'
	import { PageParams } from '../../types/global'
	import { ReviewItem } from '../../types/review'
	import { baseURL } from '@/utils/config'
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";

	// 获取父组件参数
	const props = defineProps<{
		bookId : number
	}>()

	// 状态控制
	const activeFilter = ref('全部') // 当前激活的筛选条件
	const FILTER_MAP = {
		1: '全部',
		2: '最新',
		3: '最多赞',
		4: '长评'
	} // 筛选条件映射

	// 数据存储
	const bookInfo = ref<BookItem>() // 书籍信息
	const reviewData = ref<ReviewItem[]>([]) // 书评数据

	// 加载状态
	const finish = ref(false) // 是否加载完成
	const isLoading = ref(false) // 是否正在加载
	const isLoadingStatus = ref('more') // 加载状态

	// 分页参数
	const pageParams : Required<PageParams> = {
		current: 1,
		size: 8,
	}

	/**
	 * 处理筛选条件变更
	 * @param filter 选中的筛选条件
	 */
	const handleFilter = (filter : string) => {
		activeFilter.value = filter
		// 重置分页并重新加载数据
		pageParams.current = 1
		handlePageGetReviewList()
	}

	/**
	 * 页面加载时调用
	 */
	onLoad(async () => {
		isLoading.value = true
		isLoadingStatus.value = 'loading'
		await handlePageGetReviewList()
		await queryBookInfoById()

		// 延迟加载
		setTimeout(() => {
			isLoading.value = false
			isLoadingStatus.value = 'more'
		}, 100)
	})

	/**
	 * 分页获取书评列表
	 */
	const handlePageGetReviewList = async () => {
		const queryParams = ref({
			bookId: props.bookId,
			filter: Object.keys(FILTER_MAP).find(key => FILTER_MAP[key as unknown as number] === activeFilter.value)
		})
		// 查询书籍列表
		await commonPageQueryData(
			pageReviewsAPI,
			reviewData,
			finish,
			isLoading,
			pageParams,
			queryParams,
		)
	}

	/**
	 * 处理书评点赞
	 * @param id 书评ID
	 */
	const handleLikeReview = async (id : number) => {
		// await likeReviewAPI(id)
		// 刷新数据
		handlePageGetReviewList()
	}

	/**
	 * 处理书评点踩
	 * @param id 书评ID
	 */
	const handleUnlikeReview = async (id : number) => {
		// await unLikeReviewAPI(id)
		// 刷新数据
		handlePageGetReviewList()
	}

	/**
	 * 查询书籍信息
	 */
	const queryBookInfoById = async () => {
		const res = await getBookInfoByIdAPI(props.bookId)
		bookInfo.value = res.data
	}

	/**
	 * 根据评分生成星星显示
	 * @param score 评分
	 * @returns 星星显示字符串
	 */
	const getStarsDisplay = (score : number) => {
		const lightStars = getLightStarCount(score)
		const darkStars = 5 - getLightStarCount(score)
		return '★'.repeat(lightStars) + '☆'.repeat(darkStars)
	}

	/**
	 * 计算亮星星数量
	 * @param score 评分
	 * @returns 亮星星数量
	 */
	const getLightStarCount = (score : number) => {
		return Math.floor(score / 2)
	}
</script>

<style scoped lang="scss">
	// 书评页面容器
	.review-page {
		height: 100vh;

		// 书籍评分区域
		.book-rating {
			padding: 1rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: #f3f1f1;
			height: 80px;
			border-radius: 10px;
			margin: 20px;

			.rating-overview {
				display: flex;
				align-items: center;
				flex-direction: column;

				.rating-value {
					color: black;
					font-size: 2.0rem;
				}

				.rating-count {
					color: #4b5563;
					margin-left: 0.5rem;
				}
			}

			.star-display {
				display: flex;
				flex-direction: row;
			}
		}

		// 筛选按钮区域
		.filter-buttons {
			display: flex;
			margin-bottom: 1.5rem;
			height: 30px;

			.filter-button {
				background-color: #f3f1f1;
				border-radius: 0.25rem;
				font-size: 15px;
				display: flex;
				align-items: center;

				// 激活状态样式
				&.active {
					background-color: #ffe3be;
					color: #e5942a;
				}
			}
		}

		// 书评列表区域
		.review-list {
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			padding: 1rem;

			.review-card {
				.review-header {
					display: flex;
					align-items: center;
					margin-bottom: 0.75rem;

					.user-avatar {
						border-radius: 50%;
						width: 2.5rem;
						height: 2.5rem;
					}

					.user-info {
						margin-left: 0.75rem;
						flex-grow: 1;

						.user-name {
							font-weight: 600;
						}

						.publish-time {
							font-size: 0.875rem;
							color: #6b7280;
						}
					}

					.follow-button {
						background-color: #f9f9f9;
						color: #FF9800;
					}
				}

				.review-content {
					margin-bottom: 0.75rem;
				}

				.review-footer {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.review-rating {
						.rating-stars {
							color: #FFD700;
						}
					}

					.interaction-controls {
						display: flex;
						align-items: center;

						.review-time {
							color: #6b7280;
							font-size: 12px;
						}

						.interaction-button {
							display: flex;
							align-items: center;
							height: 30px;
							margin-left: 12rpx;
							width: 40px;
							display: flex;
							align-items: center;
							justify-content: center;

							.like-count,
							.dislike-count {
								margin-left: 0.25rem;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
</style>